<script setup lang="ts">
import { defineEmits, ref } from 'vue'

const emit = defineEmits<{
  (e: 'show-drawer'): void
}>()

const isVisible = ref(true)

const handleShowDrawer = () => {
  isVisible.value = false
  emit('show-drawer')
}

// 监听抽屉关闭事件
uni.$on('drawer-close', () => {
  isVisible.value = true
})
</script>

<template>
  <view class="header" v-if="isVisible">
    <button class="menu-button" @click="handleShowDrawer">
      <uni-icons type="bars" size="24" color="#333" />
    </button>
    <view class="title">AI Tom</view>
  </view>
</template>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

.menu-button {
  position: absolute;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &:active {
    background: #e4e6eb;
  }
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
  .header {
    background: #1a1a1a;
    border-bottom: 1px solid #333;
  }

  .menu-button {
    background: #2a2a2a;
    &:active {
      background: #333;
    }
  }

  .title {
    color: #fff;
  }
}
</style>
